<template>
<div>
    <NuxtLink to="/about">About</NuxtLink>
    <span @click="tiao">跳转</span>
    <!-- <NuxtLink to="/" query="{id:code}">跳转</NuxtLink> -->
    <section class="container">
        <!-- <sf-home :title="title" /> -->
        <!-- <sf-modal name="hello-world" @before-open="beforeOpen" /> -->
        <!-- <modal name="hello-world" @before-open="beforeOpen"/> -->
        <div>
            <logo />
            <h1 class="title">
                nuxt-test
            </h1>
            <h2 class="subtitle">
                My praiseworthy Nuxt.js project
            </h2>
            <div class="links">
                <a
            href="https://nuxtjs.org/"
            target="_blank"
            class="button--green"
          >Documentation</a>
                <a
            href="https://github.com/nuxt/nuxt.js"
            target="_blank"
            class="button--grey"
          >GitHub</a>
            </div>
        </div>
    </section>
</div>
</template>

<script>
import $axios from 'axios';
import Logo from '~/components/Logo.vue'

export default {
    data() {
        return {
            time: 0,
            duration: 5000,
            title: '这是一个首页',
            headerConfig: [],
            userInfo: {}
        }
    },
    async asyncData({store, route, req}) {
        const userInfo = await $axios.get('http://api.524411.com/user/info');
        return {userInfo: userInfo.data.data}
    },
    async fetch({store,params,req}) {
        // if(store.state.isCache) return false;
        store.commit('updateState',{
            isMobile: false
        })
        await store.dispatch('initNav');
        store.commit('updateState',{
            isCache: true
        })
    },
    watch: {
      $route: {
        handler: function(val, oldVal){
          console.log(val.query);
        },
        // 深度观察监听
        deep: true
      }
    },
    components: {
        Logo
    },
    mounted() {
        console.log(this.$route);
    },
    methods: {
        tiao(){
            this.$router.push({ path: '/',query:{id:111}});
            console.log(111);
        }
    }
}
</script>

<style>
.container {
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.title {
    font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    display: block;
    font-weight: 300;
    font-size: 100px;
    color: #35495e;
    letter-spacing: 1px;
}

.subtitle {
    font-weight: 300;
    font-size: 42px;
    color: #526488;
    word-spacing: 5px;
    padding-bottom: 15px;
}

.links {
    padding-top: 15px;
}
</style>
